<template>
    <Form ref="formCustom" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" :label-width="200"
          class="register-page">
        <Row>
            <Col span="12">
                <FormItem label="登录账号" prop="login_name">
                    <Input v-model="form.login_name" placeholder="输入登录账号"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="country" label="选择国家">
                    <Select v-model="form.country" placeholder="请选择国家">
                        <Option value="beijing">中国</Option>
                        <Option value="shanghai">美国</Option>
                        <Option value="shenzhen">英国</Option>
                        <Option value="shenzhen">法国</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="companyFullNameChinese" label="公司全称(中)">
                    <Input v-model="form.companyFullNameChinese" placeholder="公司全称(中)">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="CompanyAbbreviationChinese" label="公司简称(中)">
                    <Input v-model="form.CompanyAbbreviationChinese" placeholder="公司简称(中)">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="companyFullNameEnglish" label="公司全称(英)">
                    <Input v-model="form.companyFullNameEnglish" placeholder="公司全称(英)">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="CompanyAbbreviationEnglish" label="公司简称(英)">
                    <Input v-model="form.CompanyAbbreviationEnglish" placeholder="公司简称(英)">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="addressChinese" label="公司地址(中)">
                    <Input v-model="form.addressChinese" placeholder="公司地址(中)">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="addressEnglish" label="公司地址(英)">
                    <Input v-model="form.addressEnglish" placeholder="公司地址(英)">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="legalPersonChinese" label="法人代表(中)">
                    <Input v-model="form.legalPersonChinese" placeholder="法人代表(中)">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="legalPersonEnglish" label="法人代表(英)">
                    <Input v-model="form.legalPersonEnglish" placeholder="法人代表(英)">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="FixedTelephone" label="固定电话">
                    <Input v-model="form.FixedTelephone" placeholder="固定电话">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="MobilePhone" label="手机">
                    <Input v-model="form.MobilePhone" placeholder="手机">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="Email" label="电子邮箱">
                    <Input v-model="form.Email" placeholder="电子邮箱">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="PostalCode" label="邮政编码">
                    <Input v-model="form.PostalCode" placeholder="邮政编码">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="IntroduceChinese" label="公司介绍(中)">
                    <Input v-model="form.IntroduceChinese" type="textarea" autosize placeholder="公司介绍(中)">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="IntroduceEnglish" label="公司介绍(英)">
                    <Input v-model="form.IntroduceEnglish" type="textarea" autosize placeholder="公司介绍(英)">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="OpeningBankChinese" label="开户行(中)">
                    <Input v-model="form.OpeningBankChinese">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="AccountNumber" label="本币账号">
                    <Input v-model="form.AccountNumber">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="Currency" label="币别">
                    <Input v-model="form.Currency">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="CustomsCode" label="海关代码">
                    <Input v-model="form.CustomsCode">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="OpeningBankEnglish" label="开户行(英)">
                    <Input v-model="form.OpeningBankEnglish">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="TaxNumber" label="税务登记号">
                    <Input v-model="form.TaxNumber">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem prop="UnitCode" label="单位代码">
                    <Input v-model="form.UnitCode">
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem prop="InspectionReport" label="报检登记号">
                    <Input v-model="form.InspectionReport">
                    </Input>
                </FormItem>
            </Col>
        </Row>
        <div class="button-form">
            <FormItem>
                <Button @click="handleSubmit" type="primary" long class="reg-btn" :loading="loading">注册</Button>
            </FormItem>
        </div>
    </Form>
</template>
<script>
import { checkAcount, sendMsg } from '@/api/user'
import { mapActions } from 'vuex'

export default {
  name: 'RegisterForm',
  data () {
    const isEmpty = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('必须填写'))
      } else {
        return callback()
      }
    }
    const validateFullNameChinese = (rule, value, callback) => {
      let word = this.isChinese(value)
      let mount = this.checksum(value)
      if (mount < 6) {
        callback(new Error('请输入6-40个汉字'))
      } else if (mount > 40) {
        callback(new Error('不能超过40个汉字'))
      } else if (word === false && mount > 6) {
        callback(new Error('请输入汉字'))
      }
      return callback()
    }
    const validateAbbreviationChinese = (rule, value, callback) => {
      let word = this.isChinese(value)
      let mount = this.checksum(value)
      if (mount < 4) {
        callback(new Error('请输入4-9个汉字'))
      } else if (mount > 9) {
        callback(new Error('不能超过9个汉字'))
      } else if (word === false && mount > 4) {
        callback(new Error('请输入汉字'))
      }
      return callback()
    }
    const validatecompanyFullNameEnglish = (rule, value, callback) => {
      let word = this.isLetter(value)
      let sum = this.checksumLetter(value)
      if (sum < 20) {
        callback(new Error('请输入20-60个字母'))
      } else if (sum > 60) {
        callback(new Error('不能超过60个字母'))
      } else if (word === false && sum > 0) {
        callback(new Error('只能输入字母'))
      }
      return callback()
    }
    const validateCompanyAbbreviationEnglish = (rule, value, callback) => {
      let word = this.isLetter(value)
      let sum = this.checksumLetter(value)
      if (sum < 8) {
        callback(new Error('请输入8-20个字母'))
      } else if (sum > 20) {
        callback(new Error('不能超过20个字母'))
      } else if (word === false && sum > 0) {
        callback(new Error('只能输入字母'))
      }
      return callback()
    }
    const validateaddressChinese = (rule, value, callback) => {
      let word = this.isChinese(value)
      let mount = this.checksum(value)
      if (mount < 5) {
        callback(new Error('请输入5-60个汉字'))
      } else if (mount > 60) {
        callback(new Error('不能超过60个汉字'))
      } else if (word === false && mount > 0) {
        callback(new Error('请输入汉字'))
      }
      return callback()
    }
    const validateaddressEnglish = (rule, value, callback) => {
      let word = this.isLetter(value)
      let sum = this.checksumLetter(value)
      if (sum < 20) {
        callback(new Error('请输入20-90个字母'))
      } else if (sum > 90) {
        callback(new Error('不能超过90个字母'))
      } else if (word === false && sum > 0) {
        callback(new Error('只能输入字母'))
      }
      return callback()
    }
    const validatelegalPersonChinese = (rule, value, callback) => {
      let word = this.isChinese(value)
      let mount = this.checksum(value)
      if (mount < 2) {
        callback(new Error('请输入2-5个汉字'))
      } else if (mount > 5) {
        callback(new Error('不能超过5个汉字'))
      } else if (word === false && mount > 0) {
        callback(new Error('请输入汉字'))
      }
      return callback()
    }
    const validatelegalPersonEnglish = (rule, value, callback) => {
      let word = this.isLetter(value)
      let sum = this.checksumLetter(value)
      if (sum < 3) {
        callback(new Error('请输入3-20个字母'))
      } else if (sum > 20) {
        callback(new Error('不能超过20个字母'))
      } else if (word === false && sum > 0) {
        callback(new Error('只能输入字母'))
      }
      return callback()
    }
    const validateMobilePhone = (rule, value, callback) => {
      let word = this.istelephone(value)
      let sum = this.checksumLetter(value)
      if (sum < 5) {
        callback(new Error('请输入5-20个数字'))
      } else if (sum > 20) {
        callback(new Error('不能超过20个数字'))
      } else if (word === false && sum > 0) {
        callback(new Error('只能输入数字'))
      }
      return callback()
    }
    const validateFixedTelephone = (rule, value, callback) => {
      let word = this.istphone(value)
      let sum = this.checksumLetter(value)
      if (sum < 5) {
        callback(new Error('请输入5-20个数字'))
      } else if (sum > 20) {
        callback(new Error('不能超过20个数字'))
      } else if (word === false && sum > 0) {
        callback(new Error('请输入正确格式'))
      }
      return callback()
    }
    const validatePostalCode = (rule, value, callback) => {
      let sum = this.checksumLetter(value)
      if (sum < 5) {
        callback(new Error('请输入5-10个字符'))
      } else if (sum > 20) {
        callback(new Error('不能超过10个字符'))
      }
      return callback()
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请在输入相同密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次密码输入不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        login_name: '',
        company_name: '',
        companyFullNameChinese: '',
        CompanyAbbreviationChinese: '',
        companyFullNameEnglish: '',
        CompanyAbbreviationEnglish: '',
        addressChinese: '',
        addressEnglish: '',
        legalPersonChinese: '',
        legalPersonEnglish: '',
        FixedTelephone: '',
        MobilePhone: '',
        Email: '',
        PostalCode: '',
        IntroduceChinese: '',
        IntroduceEnglish: '',
        OpeningBankChinese: '',
        AccountNumber: '',
        Currency: '',
        CustomsCode: '',
        OpeningBankEnglish: '',
        UnitCode: '',
        InspectionReport: ''
      },
      rules: {
        login_name: { required: true, validator: isEmpty, trigger: 'blur' },
        passwdCheck: { validator: isEmpty, trigger: 'blur' },
        companyFullNameChinese: { required: true, validator: isEmpty, trigger: 'blur' },
        company_name: [
          { required: true, message: '请输入公司名称', trigger: 'change' }
        ],
        CompanyAbbreviationChinese: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        companyFullNameEnglish: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        CompanyAbbreviationEnglish: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        addressChinese: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        addressEnglish: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        legalPersonChinese: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        legalPersonEnglish: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        MobilePhone: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        FixedTelephone: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        PostalCode: [
          { required: true, validator: isEmpty, trigger: 'blur' }
        ],
        msgCode: [
          { required: true, message: '输入短信验证码', trigger: 'change' }
        ]
      },
      runTime: 0,
      buttonDisable: false,
      buttonTitle: '发送验证码',
      loading: false
    }
  },
  methods: {
    ...mapActions([
      'setHelpId'
    ]),
    // 验证汉字是几位
    checksum (chars) {
      var sum = 0
      for (var i = 0; i < chars.length; i++) {
        var c = chars.charCodeAt(i)
        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
          sum++
        } else {
          sum += 2
        }
      }
      return sum / 2
    },
    // 验证字母是几位
    checksumLetter (chars) {
      var sum = 0
      for (var i = 0; i < chars.length; i++) {
        var c = chars.charCodeAt(i)
        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
          sum++
        } else {
          sum += 2
        }
      }
      return sum
    },
    // 验证是否是汉字
    isChinese (obj) {
      var reg = /^[\u0391-\uFFE5]+$/
      if (obj !== '' && !reg.test(obj)) {
        return false
      }
    },
    // 验证是否是字母
    isLetter (obj) {
      let reg = /^[a-zA-Z]+$/
      if (obj !== '' && !reg.test(obj)) {
        return false
      }
    },
    // 验证手机号
    istelephone (obj) {
      let reg = /^1[3456789]\d{9}$/
      if (obj !== '' && !reg.test(obj)) {
        return false
      }
    },
    // 验证固定电话
    istphone (obj) {
      let reg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
      if (obj !== '' && !reg.test(obj)) {
        return false
      }
    },
    // 验证邮编
    /* isEmail (obj) {
         let reg = /^[1-9]\\d{5}$/
         if (obj !== '' && !reg.test(obj)) {
         return false
         }
         }, */
    handleSubmit () {
      this.$refs.formCustom.validate((valid) => {
        if (valid) {
          this.$Message.success('恭喜您注册成功!')
          setTimeout(() => {
            this.$router.push({
              name: 'businessAccount'
            })
          }, 1500)
        } else {
          this.$Message.error('请查看表单项!')
        }
      })
    },
    sendMsg () {
      let mobile = this.form.login_name
      let code = this.form.code
      if (mobile === '') {
        this.$Message.error('请输入手机号')
        return false
      }
      if (code === '') {
        this.$Message.error('请输入图片验证码')
        return false
      }
      this.sendMobileCode(mobile, code)
    },
    sendMobileCode (mobile, code) {
      sendMsg(mobile, code).then(ret => {
        if (ret.data.errcode === 1001) {
          this.buttonRun()
        } else if (ret.data.errcode === 1020) {
          this.$refs.imgCode.click()
          this.$Message.error('图片验证码错误！')
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    buttonRun () {
      this.runTime = 60
    }
  },
  mounted () {
    let _this = this
    this.setHelpId(4)
    setInterval(function () {
      if (_this.runTime > 0) {
        console.log(_this.runTime)
        _this.runTime -= 1
        _this.buttonTitle = '发送验证码(' + _this.runTime + ')'
        _this.buttonDisable = true
      } else {
        _this.buttonTitle = '发送验证码'
        _this.buttonDisable = false
      }
    }, 1000)
  }
}
</script>
<style scoped>
    .button-form {
        width: 50%;
        margin-top: 30px;
        margin-left: 233px
    }

    .middle-form {
        margin-top: 10px;
    }

    .register-verify {
        width: 100%;
    }

    .register-page {
        width: 80%;
    }

    /*.reg-btn{*/
    /*    background-color: #6a3ba2;*/
    /*    border-color: #6a3ba2;*/
    /*}*/
    /*.reg-btn:hover{*/
    /*    background-color: #8f53e0;*/
    /*    border-color: #6a3ba2;*/
    /*}*/
</style>
